Vite 插件 Hook 体系

Vite 插件系统提供丰富的 Hook，分为 Vite 特有和 Rollup 兼容两类。

Hook 分类

config 钩子

export default function myPlugin() {
  return {
    name: 'my-plugin',
    config(config, { command, mode }) {
      // 返回部分配置合并到 config
      return {
        define: {
          __DEV__: command === 'serve'
        }
      }
    }
  }
}

configResolved 钩子

export default function myPlugin() {
  return {
    name: 'my-plugin',
    configResolved(resolvedConfig) {
      // 访问最终配置
      console.log(resolvedConfig.mode)
    }
  }
}

resolveId 钩子

export default function myPlugin() {
  return {
    name: 'my-plugin',
    resolveId(source, importer) {
      // 自定义路径解析
      if (source === 'virtual:module') {
        return source
      }
      return null  // 使用默认解析
    }
  }
}

load 钩子

export default function myPlugin() {
  return {
    name: 'my-plugin',
    load(id) {
      // 加载模块内容
      if (id === 'virtual:module') {
        return 'export default "virtual content"'
      }
      return null  // 使用默认加载
    }
  }
}

transform 钩子

export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      // 转换模块代码
      if (id.endsWith('.custom')) {
        return {
          code: transformCustom(code),
          map: null
        }
      }
      return null  // 不转换
    }
  }
}

注意：transform 返回 null 表示不处理，返回 { code, map } 表示转换后内容。

Hook 执行顺序

config → configResolved →
resolveId → load → transform →
generateBundle（构建产物）

enforce 控制顺序

{
  name: 'my-plugin',
  enforce: 'pre',  // pre/post/默认
  // 钩子...
}

要点总结

• Vite 特有钩子用于配置和开发服务器
• Rollup 钩子用于模块处理和构建产物
• enforce 控制钩子执行顺序
• 返回 null 使用默认处理